<template>
  <a-card>
    <a-form-model :model="searchForm" v-bind="layout">
      <a-row>
        <!-- 搜索栏 -->
        <a-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
          <a-form-model-item label="收发标志">
            <a-select placeholder="" v-model="searchForm.receiveFlag">
              <a-select-option
                v-for="val in signList"
                :key="val.value"
                :value="val.value"
              >
                {{ val.title }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xl="10" :lg="10" :md="10" :sm="24" :xs="24"></a-col>

        <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24" align="right">
          <a-button type="primary" @click="searchQuery"> 查询 </a-button>
          <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
            重置
          </a-button>
        </a-col>
      </a-row>

      <a-row>
        <a-col align="left">
          <a-button
            type="primary"
            @click="addModal"
            style="margin-bottom: 10px"
          >
            <a-icon type="plus" />
            添加收发类别
          </a-button>
        </a-col>

        <!-- 添加收发类别彈窗开始 -->
        <a-modal
          ref="collectionForm"
          :visible="addVisible"
          width="60%"
          title="添加收发类别"
          okText="提交"
          @cancel="addCancel"
          @ok="addOk"
        >
          <a-form-model ref="" :rules="rules" :model="addForm" v-bind="layout">
            <a-row>
              <a-col :xl="8" :lg="8" md="8" :sm="24">
                <a-form-model-item label="收发标志">
                  <a-select placeholder="" v-model="addForm.receiveFlag">
                    <a-select-option
                      v-for="val in signList"
                      :key="val.value"
                      :value="val.value"
                      >{{ val.title }}</a-select-option
                    >
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :xl="8" :lg="8" md="8" :sm="24">
                <a-form-model-item
                  ref="typeNum"
                  label="收发类别编码"
                  prop="typeNum"
                >
                  <a-input placeholder="" v-model="addForm.code" />
                </a-form-model-item>
              </a-col>
              <a-col :xl="8" :lg="8" md="8" :sm="24">
                <a-form-model-item ref="sort" label="收发类别" prop="sort">
                  <a-input placeholder="" v-model="addForm.name" />
                </a-form-model-item>
              </a-col>
            </a-row>

            <!-- 添加科目 -->
            <!-- <a-row style="margin-bottom: 10px">
              <a-col>
                <a-button
                  type="primary"
                  style="margin-left: 10%"
                  @click="newMemberSubjects"
                  >添加科目编码</a-button
                >
              </a-col>
            </a-row> -->
            <!-- 会计科目 -->
            <!-- <div
              v-for="(item, index) in addForm.accountingSubjects"
              :key="index"
            >
              <a-row>
                <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
                  <a-form-model-item
                    label="方向"
                    :prop="'column.' + index + '.type'"
                  >
                    <a-select placeholder="" v-model="item.type">
                      <a-select-option
                        v-for="val in directionList"
                        :key="val.value"
                        :value="val.value"
                        >{{ val.title }}</a-select-option
                      >
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
                  <a-form-model-item
                    label="科目编码"
                    :prop="'column.' + index + '.value'"
                  >
                    <a-input placeholder="" v-model="item.value" />
                  </a-form-model-item>
                </a-col>

                <a-col :xl="4" :lg="4" :md="6" :sm="12" :xs="12">
                  <a-checkbox-group
                    v-model="item.checkValue"
                    :options="plainOptions"
                    style="margin-left: 10%"
                  />
                </a-col>

                <a-col :xl="4" :lg="4" :md="6" :sm="12" :xs="12">
                  <center>
                    <a-icon
                      type="delete"
                      theme="twoTone"
                      two-tone-color="#eb2f96"
                      style="fontsize: 20px; margin-left: 10%; margin-top: 10px"
                      @click="removeSubjects(index)"
                    />
                  </center>
                </a-col>
              </a-row>
            </div> -->

            <!-- <a-row style="margin-bottom: 10px">
              <a-col>
                <a-button
                  type="primary"
                  style="margin-left: 10%"
                  @click="newMember"
                  >添加摘要所含因素</a-button
                >
              </a-col>
            </a-row> -->

            <!-- 摘要选项字段添加 -->
            <!-- <div v-for="(item, index) in addForm.abstractType" :key="index">
              <a-row>
                <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
                  <a-form-model-item
                    label="摘要因素"
                    :prop="'column.' + index + '.type'"
                  >
                    <a-input placeholder="" v-model="item.type" />
                  </a-form-model-item>
                </a-col>
                <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
                  <a-form-model-item
                    label="摘要因素值"
                    :prop="'column.' + index + '.value'"
                  >
                    <a-input placeholder="" v-model="item.value" />
                  </a-form-model-item>
                </a-col>

                <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
                  <center>
                    <a-icon
                      type="delete"
                      theme="twoTone"
                      two-tone-color="#eb2f96"
                      style="fontsize: 20px; margin-left: 10%; margin-top: 10px"
                      @click="removeAbstract(index)"
                    />
                  </center>
                </a-col>
              </a-row>
            </div> -->
          </a-form-model>
        </a-modal>
        <!-- 新增收发类别结束 -->
      </a-row>
    </a-form-model>

    <!-- 表格 -->

    <a-table
      bordered
      :data-source="dataSource"
      :columns="columns"
      :row-selection="rowSelection"
    >
      <template slot="序号" slot-scope="text, record">
        <editable-cell
          :text="text"
          @change="onCellChange(record.key, 'num', $event)"
        />
      </template>
      <template slot="caozuo" slot-scope="text, record">
        <!-- 修改按钮与修改页面 -->

        <a type="primary" @click="showModal1(record)"> 修改 </a>
        <a-divider type="vertical" />

        <!-- 删除提示 -->
        <a-popconfirm
          v-if="dataSource.length"
          title="确定删除吗?"
          @confirm="onDelete(record.id)"
        >
          <a href="javascript:;">删除</a>
        </a-popconfirm>
      </template>
    </a-table>
    <!-- 修改弹窗开始 -->
    <a-modal
      title="修改期初数据"
      :visible="visible1"
      width="60%"
      :labelCol="{ span: 8 }"
      :WapperCol="{ span: 5 }"
      @ok="handleOk1"
      @cancel="handleCancel1"
      cancelText="取消"
      okText="保存"
    >
      <a-form-model ref="" :rules="rules" :model="updateForm" v-bind="layout">
        <a-row>
          <a-col :xl="8" :lg="8" md="8" :sm="24">
            <a-form-model-item label="收发标志">
              <a-select placeholder="" v-model="updateForm.receiveFlag">
                <a-select-option
                  v-for="val in signList"
                  :key="val.value"
                  :value="val.value"
                  >{{ val.title }}</a-select-option
                >
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :xl="8" :lg="8" md="8" :sm="24">
            <a-form-model-item
              ref="typeNum"
              label="收发类别编码"
              prop="typeNum"
            >
              <a-input placeholder="" v-model="updateForm.code" />
            </a-form-model-item>
          </a-col>
          <a-col :xl="8" :lg="8" md="8" :sm="24">
            <a-form-model-item ref="sort" label="收发类别" prop="sort">
              <a-input placeholder="" v-model="updateForm.name" />
            </a-form-model-item>
          </a-col>
        </a-row>

        <!-- 添加科目 -->
        <!-- <a-row style="margin-bottom: 10px">
          <a-col>
            <a-button
              type="primary"
              style="margin-left: 10%"
              @click="newMemberUpdateSubjects"
              >添加科目编码</a-button
            >
          </a-col>
        </a-row> -->
        <!-- 会计科目 -->
        <!-- <div
          v-for="(item, index) in updateForm.accountingSubjects"
          :key="index"
        >
          <a-row>
            <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
              <a-form-model-item
                label="方向"
                :prop="'column.' + index + '.type'"
              >
                <a-select placeholder="" v-model="item.type">
                  <a-select-option
                    v-for="val in directionList"
                    :key="val.value"
                    :value="val.value"
                    >{{ val.title }}</a-select-option
                  >
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
              <a-form-model-item
                label="科目编码"
                :prop="'column.' + index + '.value'"
              >
                <a-input placeholder="" v-model="item.value" />
              </a-form-model-item>
            </a-col>

            <a-col :xl="4" :lg="4" :md="6" :sm="12" :xs="12">
              <a-checkbox-group
                v-model="item.checkValue"
                :options="plainOptions"
                style="margin-left: 10%"
              />
            </a-col>

            <a-col :xl="4" :lg="4" :md="6" :sm="12" :xs="12">
              <center>
                <a-icon
                  type="delete"
                  theme="twoTone"
                  two-tone-color="#eb2f96"
                  style="fontsize: 20px; margin-left: 10%; margin-top: 10px"
                  @click="removeUpdateSubjects(index)"
                />
              </center>
            </a-col>
          </a-row>
        </div> -->

        <!-- <a-row style="margin-bottom: 10px">
          <a-col>
            <a-button
              type="primary"
              style="margin-left: 10%"
              @click="newMemberUpdate"
              >添加摘要所含因素</a-button
            >
          </a-col>
        </a-row> -->

        <!-- 摘要选项字段添加 -->
        <!-- <div v-for="(item, index) in updateForm.abstractType" :key="index">
          <a-row>
            <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
              <a-form-model-item
                label="摘要因素"
                :prop="'column.' + index + '.type'"
              >
                <a-input placeholder="" v-model="item.type" />
              </a-form-model-item>
            </a-col>
            <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
              <a-form-model-item
                label="摘要因素值"
                :prop="'column.' + index + '.value'"
              >
                <a-input placeholder="" v-model="item.value" />
              </a-form-model-item>
            </a-col>

            <a-col :xl="8" :lg="8" :md="12" :sm="24" :xs="24">
              <center>
                <a-icon
                  type="delete"
                  theme="twoTone"
                  two-tone-color="#eb2f96"
                  style="fontsize: 20px; margin-left: 10%; margin-top: 10px"
                  @click="removeUpdateAbstract(index)"
                />
              </center>
            </a-col>
          </a-row>
        </div> -->
      </a-form-model>
    </a-modal>
    <!-- 修改弹窗结束 -->
  </a-card>
</template>

<script>
import { ZiDianBiaoHttp } from "../../services/modules/ZiDianBiao";
const $ZDB = new ZiDianBiaoHttp();

import { CommonAjax } from "@/services/modules/common";
const comHttp = new CommonAjax(); // 公用接口

import { ShouFaLeiBieHttp } from "../../services/modules/JiChuXinXiGuanLi/ShouFaLeiBieGuanLi";
import { it } from "date-fns/locale";
console.log(it);
const $http = new ShouFaLeiBieHttp();

const columns = [
  {
    title: "序号",
    dataIndex: "num",
    width: "",
    align: "center",
    // customRender: (text, record, index) => `${index + 1}`,
  },
  {
    title: "收发标志",
    width: "",
    dataIndex: "receiveFlag_dictText",
    align: "center",
  },
  {
    title: "收发类别编码",
    width: "",
    dataIndex: "code",
    align: "center",
  },
  {
    title: "收发类别",
    width: "",
    dataIndex: "name",
    align: "center",
  },
  //  {
  //   title: "封存标志",
  //   width: "",
  //   dataIndex: "receiveFlag_dictText",
  //   align: "center",
  // },
  // {
  //   title: "摘要",
  //   width: "15%",
  //   dataIndex: "abstractType",
  //   align: "center",
  //   customRender: (text, record, index) => {
  //     abstract = [];
  //     console.log(record);
  //     console.log(index);
  //     if (record.abstractType != null) {
  //       record.abstractType.forEach((item) => {
  //         abstract.push("[" + item.value + "]  ");
  //       });
  //     }

  //     return abstract;
  //   },
  // },
  // {
  //   title: "会计科目",
  //   width: "15%",
  //   dataIndex: "accountingDebtor",
  //   align: "center",
  //   customRender: (text, record, index) => {
  //     debtor = [];
  //     if (record.accountingSubjects != null) {
  //       console.log(index);
  //       record.accountingSubjects.forEach((item) => {
  //         if (item.type == "1") {
  //           debtor.push("[借方：" + item.value + "]  √" + item.checkValue);
  //         }
  //         if (item.type == "2") {
  //           debtor.push("[贷方：" + item.value + "] √ " + item.checkValue);
  //         }
  //       });
  //     }
  //     return debtor;
  //   },
  // },
  {
    title: "操作",
    dataIndex: "caozuo",
    width: "",
    scopedSlots: { customRender: "caozuo" },
    align: "center",
  },
];
const dataSource = [];
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      "selectedRows: ",
      selectedRows
    );
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  },
};
const plainOptions = ["金额", "数量"];

const abstractType = [];

export default {
  data() {
    return {
      queryParam: {
        //查询参数
        page: 1, //第几页
        size: 10, //每页中显示数据的条数
        hosName: "",
        hosCode: "",
        province: "",
        city: "",
      },
      //===============分页========================
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10, //每页中显示10条数据
        pageSizeOptions: ["10"], //每页中显示的数据
        showTotal: (total) => `共有${total}条数据`, //分页中显示总的数据
      },
      signList: [], //收发标志字典表
      //新增弹窗
      addVisible: false,
      addForm: {
        code: "", //收发类别编码
        receiveFlag: "", //收发标志
        name: "", //收发类别
        id: "",
        abstractType: [
          {
            type: "", //摘要因素
            value: "", //摘要因素值
            checkValue: [],
          },
        ],
        accountingSubjects: [
          {
            type: "", //方向
            value: "", //科目编码
            checkValue: [],
          },
        ],
      },

      directionList: [
        {
          value: 1,
          title: "借方",
        },
        {
          value: 2,
          title: "贷方",
        },
      ],

      visible1: false, //修改弹窗
      updateForm: {
        code: "", //收发类别编码
        receiveFlag: "", //收发标志
        name: "", //收发类别
        id: "",
        abstractType: [
          {
            type: "", //摘要因素
            value: "", //摘要因素值
          },
        ],
        accountingSubjects: [
          {
            type: "", //方向
            value: "", //科目编码
            checkValue: "",
          },
        ],

        //修改表单

        plainOptionsUpdate: ["金额", "数量"],
      },

      searchForm: {
        //查询的表单

        code: "", //收发类别编码
        receiveFlag: "", //收发标志
        name: "", //收发类别
        id: "",
        // "receiveFlag_dictText": ""
      },

      layout: {
        labelCol: { span: 8 },
        wrapperCol: { span: 15 },
      },

      // 表格数据

      count: 2,
      dataSource, //表格数据
      dataSourceCache: [],
      columns, //表格
      rowSelection, //按行勾选
      // 新增验证规则
      rules: {
        //验证规则
        /*  penghao: [
          { required: true, message: "棚号为必填项!", trigger: "blur" },
        ],
        pengleixing: [
          { required: true, message: "棚类型为必填项！", trigger: "blur" },
        ], */
      },

      // 多选框
      value: [],
      plainOptions,

      abstractType, //修改弹窗数据来源
    };
  },
  mounted() {
    this.getwarehouseReceiveFlag(); //获取收发标志字典表
    this.getReceiveSendTypeList(); //获取收发类别列表
  },

  methods: {
    searchQuery() {
      console.log();
      const receiveFlag = Number(this.searchForm.receiveFlag);

      const _data = this.dataSourceCache.filter(
        (item) => item.receiveFlag == receiveFlag
      );

      this.dataSource = _data;
    },

    //获取收发类别列表
    getReceiveSendTypeList(
      queryPath = "?pageSize=2000" + this.queryParam.page
    ) {
      this.dataSource = [];

      comHttp.getReceiveSendTypeList(queryPath).then((res) => {
        // const pagination = { ...this.pagination }; //分页
        // pagination.total = res.result.total; //总数
        // pagination.pageSize = res.result.size; //每页大小
        // pagination.current = res.result.current; //当前页
        // this.pagination = pagination; //分页

        console.log("收发类别列表", res);
        let records = res.result.records;
        records.forEach((item, index) => {
          item.num = index + 1;
        });

        this.dataSource = records;
        this.dataSourceCache = records;
      });
    },

    getwarehouseReceiveFlag() {
      //获取收发标志字典表
      $ZDB.getwarehouseReceiveFlag().then((res) => {
        console.log("收发标志", res);
        this.signList = res.result.map((item) => {
          return { value: Number(item.value), title: item.title };
        });
      });
    },
    handleCancel1() {
      // 修改弹窗取消
      this.visible1 = false;
    },

    showModal1(record) {
      //修改按钮
      this.visible1 = !this.visible1;
      console.log("修改的是这一条：", record);
      if (record.abstractType == null) {
        record.abstractType = [
          {
            type: "", //摘要因素
            value: "", //摘要因素值
          },
        ];
      }
      if (record.accountingSubjects == null) {
        record.accountingSubjects = [
          {
            type: "", //方向
            value: "", //科目编码
            checkValue: "",
          },
        ];
      }
      this.updateForm = JSON.parse(JSON.stringify(record));
    },

    handleOk1() {
      //修改弹窗ok

      const data = {
        id: this.updateForm.id,
        code: this.updateForm.code, //收发类别编码
        receiveFlag: this.updateForm.receiveFlag, //收发标志
        name: this.updateForm.name, //收发类别名称
        // abstractType: this.updateForm.abstractType,
        // accountingSubjects: this.updateForm.accountingSubjects,
      };
      console.log("data::::::::::", data);
      $http.updateReceiveSendType(data).then((res) => {
        console.log("我进来了");
        if (res.success) {
          this.$message.success("保存成功！");
          this.getReceiveSendTypeList();
          this.visible1 = false;
          console.log(res);
        } else {
          this.$message.success("保存失败！");
        }
      });
    },

    handleReset() {
      //重置
      this.searchForm = {
        code: "", //收发类别编码
        receiveFlag: "", //收发标志
        name: "", //收发类别
      };


      this.dataSource = this.dataSourceCache;
      this.getReceiveSendTypeList(); //获取收发类别列表
    },
    onDelete(_id) {
      console.log("删除这一条", _id);
      const deletePath = `?id=${_id}`;
      $http
        .deleteReceiveSendType(deletePath)
        .then((res) => {
          if (res && res.code === 200) {
            this.$message.success("删除成功");
            this.getReceiveSendTypeList();
          } else {
            this.$message.error("删除失败");
          }
        })
        .then(() => {
          this.data = [];
        });
    },
    //新增弹窗
    addModal() {
      this.addVisible = true;
    },
    addCancel() {
      //新增弹窗
      this.addVisible = !this.addVisible;
    },
    addOk() {
      let queryPath =
        "?fieldName=" +
        "code" +
        "&tableName=" +
        "warehouse_receive_type_management" +
        "&fieldVal=" +
        this.addForm.code;
      //新增弹窗的提交
      console.log();
      const data = {
        receiveFlag: this.addForm.receiveFlag, //收发标志
        name: this.addForm.name, //收发类别
        code: this.addForm.code, //收发类别编码
        // abstractType: this.addForm.abstractType,
        // accountingSubjects: this.addForm.accountingSubjects,
      };
      //重复校验
      $http.duplicateCheck(queryPath).then((res) => {
        if (res.success) {
          $http.addReceiveSendType(data).then((res) => {
            if (res.success) {
              this.$message.success("保存成功！");
              this.addVisible = false; //关闭弹窗
              this.addForm = {
                //清空表单
                code: "", //收发类别编码
                receiveFlag: "", //收发标志
                name: "", //收发类别
                abstractType: [],
                accountingSubjects: [],
              };
              this.getReceiveSendTypeList();
            } else {
              this.$message.success("保存失败！");
            }
          });
        } else {
          this.$message.error("收发类别编码重复！");
        }
      });
    },
    // ==============分页======================
    handleTableChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.queryParam.page = pagination.current;
      this.queryParam.size = pagination.pageSize;
      // let queryPath = this.getQueryPath();
      this.getReceiveSendTypeList();
    },

    //  弹窗的摘要因素删除
    removeAbstract(index) {
      if (this.addForm.abstractType.length > 1) {
        this.addForm.abstractType.splice(index, 1);
        this.$message.success("删除成功");
      } else {
        this.$message.error("至少保留一行");
      }
    },
    removeUpdateAbstract(index) {
      if (this.updateForm.abstractType.length > 1) {
        this.updateForm.abstractType.splice(index, 1);
        this.$message.success("删除成功");
      } else {
        this.$message.error("至少保留一行");
      }
    },

    // 弹窗的摘要因素新增
    newMember() {
      this.addForm.abstractType.push({
        type: "", //摘要因素
        value: "", //摘要因素值
      });
    },
    // 表格修改弹窗新增摘要因素
    newMemberUpdate() {
      this.updateForm.abstractType.push({
        type: "", //摘要因素
        value: "", //摘要因素值
      });
    },

    // 新增弹窗科目删除
    removeSubjects(index) {
      if (this.addForm.accountingSubjects.length > 1) {
        this.addForm.accountingSubjects.splice(index, 1);
        this.$message.success("删除成功");
      } else {
        this.$message.error("至少保留一行");
      }
    },
    removeUpdateSubjects(index) {
      if (this.updateForm.accountingSubjects.length > 1) {
        this.updateForm.accountingSubjects.splice(index, 1);
        this.$message.success("删除成功");
      } else {
        this.$message.error("至少保留一行");
      }
    },
    // 弹窗的科目新增
    newMemberSubjects() {
      this.addForm.accountingSubjects.push({
        type: "", //方向
        value: "", //科目编码
        checkValue: "",
      });
    },
    newMemberUpdateSubjects() {
      this.updateForm.accountingSubjects.push({
        type: "", //方向
        value: "", //科目编码
        checkValue: "",
      });
    },
    // 修改表格取消一行
    cancle(key) {
      for (let i = 0; i < this.abstractType.length; i++) {
        if (this.abstractType[i].key == key) {
          if (this.abstractType.length > 1) {
            this.abstractType.splice(key - 1, 1);

            this.$message.success("取消成功");
          } else {
            this.$message.error("至少保留一行");
          }
        }
        this.abstractType[i].key = i + 1;
      }
    },
  },
};
</script>
 